body {
  background-color: #000;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px;
}

.loader {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: visible;
  border-radius: 50%;
  box-shadow: 
    inset 0 0 8px rgb(255 255 255 / 40%),
    0 0 25px rgb(255 255 255 / 80%);
}
.loader::before {
  content: '';
  float: left;
  padding-top: 100%;
}
@keyframes loading {
  0% { transform: rotate(0); }
  100% { transform: rotate(-360deg); }
}

.loader::after {
  content: attr(data-text);
  color: #CECECE;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 6px;
}


.loader-circle {
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(120%);
  animation: loading 2s infinite both;
}
.loader-circle:nth-of-type(1) {
  box-shadow: inset 1px 0 0 1px #2979FF, 4px 0 0 4px #2979FF;
  animation-direction: reverse;
  transform-origin: 49.6% 49.8%;
}
.loader-circle:nth-of-type(2) {
  box-shadow: inset 1px 0 0 1px #FF1744, 4px 0 0 4px  #FF1744;
  transform-origin: 49.5% 49.8%;
}
.loader-circle:nth-of-type(3) {
  box-shadow: inset 1px 0 0 1px #FFFF8D, 0 4px 0 4px #FFFF8D;
  transform-origin: 49.8% 49.8%;
}
.loader-circle:nth-of-type(4) {
  box-shadow: inset 1px 0 0 1px #B2FF59, 0 4px 0 4px #B2FF59;
  transform-origin: 49.7% 49.7%;
}